<template>
    <div class="system-settings">
        <div class="header">
            <h1>系统设置</h1>
        </div>

        <!-- 中间内容区域 -->
        <div class="content-wrapper">
            <div class="contact-cell">
                <span>开机时启动</span>
                <el-button class="cs-button" type="text" @click="StartAtion">
                    <img v-if="kjBool" class="iconsize" src="@/assets/images/usercenter/user_selectok.png" alt="">
                    <img v-if="!kjBool" class="iconsize" src="@/assets/images/usercenter/user_selectnook.png" alt="">
                    <span v-if="kjBool" style="color: #E2E2E2;">启动</span>
                    <span v-if="!kjBool" style="color: #888888;">关闭</span>
                </el-button>
            </div>

            <div class="contact-cell">
                <span>点击关闭时</span>
                <div>
                    <el-radio-group v-model="radio">
                        <el-radio :label="1">最小化到托盘</el-radio>
                        <el-radio :label="2">退出客户端</el-radio>
                    </el-radio-group>
                </div>
            </div>

            <div class="contact-cell">
                <span>自动登录</span>
                <el-button class="cs-button" type="text" @click="autoLoginAtion">
                    <img v-if="autologinBool" class="iconsize" src="@/assets/images/usercenter/user_selectok.png"
                        alt="">
                    <img v-if="!autologinBool" class="iconsize" src="@/assets/images/usercenter/user_selectnook.png"
                        alt="">
                    <span v-if="autologinBool" style="color: #E2E2E2;">下次自动登录</span>
                    <span v-if="!autologinBool" style="color: #888888;">下次自动登录</span>
                </el-button>
            </div>
        </div>

        <!-- 保存按钮区域 -->
        <div class="submit-btn">
            <el-button class="submit-feedback" type="primary" @click="confirmModify">保存</el-button>
        </div>
    </div>
</template>

<script setup>
// 脚本部分保持不变
defineOptions({
    name: 'SystemSettings'
})

import { ref, computed, onMounted } from 'vue'
// 在 SystemSettings 组件中使用
import { getLocalStorageValue, setLocalStorageValue, getAllConfig } from '@/utils/auth'
import { ElMessage } from 'element-plus'
import successIcon from '@/assets/images/success-icon.png'
import errorIcon from '@/assets/images/error-icon.png'
import warningIcon from '@/assets/images/warning-icon.png'

const kjBool = ref(false)
const autologinBool = ref(false)
const radio = ref(1)

//保存
const confirmModify = async () => {
    try {
        // 保存设置到 localStorage
        await setLocalStorageValue('autoStart', kjBool.value, 'setAutoStart_') // 开机启动
        await setLocalStorageValue('closeAction', radio.value, 'setrequest_') // 关闭动作
        await setLocalStorageValue('autoLogin', autologinBool.value, 'setrequest_') // 自动登录
        console.log('保存设置成功')
        ElMessage({
            type: 'success',
            customClass: 'custom-success-message-icon',
            dangerouslyUseHTMLString: true,
            message: `<img src="${successIcon}" alt="success-icon" style="width: 20px; height: 20px; margin-right: 4px;">保存设置成功`,
            offset: 65
        })
    } catch (error) {
        console.error('保存设置失败:', error)
    }
}

const StartAtion = () => {
    kjBool.value = !kjBool.value;
}

const autoLoginAtion = () => {
    autologinBool.value = !autologinBool.value
}

onMounted(async () => {
    try {
        //获取开机启动设置
        const autoStartValue = await getLocalStorageValue('autoStart')
        if (autoStartValue == 'True') {
            kjBool.value = true
        } else {
            kjBool.value = false
        }
        console.log('autoStartValue:', autoStartValue)

        // 获取关闭动作设置
        const closeActionValue = await getLocalStorageValue('closeAction')
        if (closeActionValue == 1) {
            radio.value = 1
        } else {
            radio.value = 2 // 默认值
        }
        console.log('closeAction:', closeActionValue)


        //获取自动登录设置
        const autoLoginValue = await getLocalStorageValue('autoLogin')
        if (autoLoginValue == 'True') {
            autologinBool.value = true
        } else {
            autologinBool.value = false
        }
        console.log('autoLoginValue:', autoLoginValue)


    } catch (error) {
        console.error('加载设置失败:', error)
        // 设置默认值
        kjBool.value = false
        autologinBool.value = false
        radio.value = 1
    }
})
</script>

<style scoped lang="scss">
/* 隐藏原生单选按钮样式 */
:deep(.el-radio__inner) {
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    outline: none;
}

/* 未选中状态图片 */
:deep(.el-radio__inner:not(:checked)) {
    background-image: url('@/assets/images/usercenter/user_radio_n.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 选中状态图片 */
:deep(.el-radio__input.is-checked .el-radio__inner) {
    background-image: url('@/assets/images/usercenter/user_radio_y.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;
    border-color: transparent !important;

    &::after {
        display: none;
    }
}

/* 去除选中时的外层边框高亮 */
:deep(.el-radio__input.is-checked + .el-radio__label) {
    color: #E2E2E2;
}

.iconsize {
    width: 24px;
    height: 24px;
}

.system-settings {
    background-color: #121517;
    color: #fff;
    box-sizing: border-box;
    padding: 20px;
    /* 使用flex布局实现底部固定 */
    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

h1 {
    font-size: 24px;
    margin: 0;
    color: #E2E2E2;
    font: "Microsoft YaHei UI";
    font-weight: bold;
}

// 新增内容容器样式，用于填充中间空间
.content-wrapper {
    flex: 1; // 占据剩余空间，将按钮推到底部
}

.contact-cell {
    background: #27292C;
    height: 60px;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    font-style: 'Bold';
    color: #E2E2E2;
}

.submit-btn {
    // 固定在底部的样式
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: end;
    // 确保按钮区域在最底部
    margin-top: auto;
}

.submit-feedback {
    background-color: #FFE500;
    color: #121212;
    border: none;
    width: 150px;
    height: 48px;
}

.submit-feedback:hover {
    background-color: #ffd900;
}
</style>